<template>
  <div>
    <el-button type="text" icon="el-icon-plus" @click="openShop">新增</el-button>
    <!-- 弹框 -->
    <el-dialog
      ref="dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      title="配件选择"
      width="70%">
      <!-- 查询条件 -->
      <el-form ref="searchForm" :inline="true" :model="search" size="mini">
        <el-form-item prop="STORAGE_CODE" label="仓库">
          <r-select
            v-model="search.STORAGE_CODE"
            class="search-input"
            selectid="STORAGE_CODE"
            selectname="STORAGE_NAME"
            url="/basedata/store/accessories/Warehouses"
            model="DMSCLOUD_PART"/>
        </el-form-item>
        <el-form-item prop="BRAND" label="品牌">
          <r-select
            v-model="search.BRAND"
            class="search-input"
            selectid="BRAND_ID"
            selectname="BRAND_NAME"
            url="/vehicleProduct/brandsdict"
            model="DMSCLOUD_BASEDATA"/>
        </el-form-item>
        <el-form-item prop="dataSources" label="数据来源">
          <r-select v-model="search.dataSources" class="search-input" type="1045"/>
        </el-form-item>
        <el-form-item prop="PART_CODE" label="配件代码">
          <el-input v-model="search.PART_CODE" placeholder="配件代码" class="search-input" />
        </el-form-item>
        <el-form-item prop="PART_NAME" label="配件名称">
          <el-input v-model="search.PART_NAME" placeholder="配件名称" class="search-input" />
        </el-form-item>
        <el-form-item prop="SPELL_CODE" label="拼音代码">
          <el-input v-model="search.SPELL_CODE" placeholder="拼音代码" class="search-input" />
        </el-form-item>
        <el-form-item prop="PART_GROUP_CODE" label="配件类别">
          <r-select v-model="search.PART_GROUP_CODE" class="search-input" type="1300"/>
        </el-form-item>
        <el-form-item prop="FIT_MODEL_CODE" label="适用机型">
          <el-input v-model="search.FIT_MODEL_CODE" placeholder="适用机型" class="search-input" />
        </el-form-item>

        <el-input v-show="false" v-model="partId" />

        <br>
        <div style="text-align:center">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 用户列表 -->
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">配件信息</div>
          <div class="btnGroup">
            <el-button-group/>
          </div>
        </div>
        <BaseTable
          ref="table"
          @chaneg-size="changeSizeHandle"
          @chaneg-page="changePageHandle"
        >
          <el-table-column
            label="序号"
            type="index"
          />
          <el-table-column
            align="center"
            label="操作"
            min-width="150px"
          >
            <template slot-scope="scope">
              <el-button
                icon="el-icon-check"
                type="primary"
                @click="Select(scope.row)"
              >选择</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="STORAGE_NAME"
            label="仓库名称"
            width="150"
          />
          <el-table-column
            prop="PART_CODE"
            label="配件代码"
            width="150"
          />
          <el-table-column
            prop="PART_NAME"
            label="配件名称"
            width="300"
          />
          <el-table-column
            prop="SALES_PRICE"
            label="销售价"
            width="150"
          />

          <el-table-column
            prop="STOCK_QUANTITY"
            label="账面库存"
            width="150"
          />
          <el-table-column
            :formatter="filterCode"
            prop="DATA_SOURCES"
            label="数据来源"
            width="150"
            type="1045"
          />

          <el-table-column
            prop="FIT_MODEL_CODE"
            label="适用机型"
            width="150"
          />

          <el-table-column
            :formatter="filterCode"
            prop="PART_GROUP_CODE"
            label="配件类别"
            width="150"
            type="1300"
          />

        </BaseTable>
      </div>
      <div style="text-align:right">
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="req">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryPartInfoByLabour
} from '@/api/repair/basedata/repairmanager/repairmanager'

import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import {
  mapGetters
} from 'vuex'
import rSelect from '@/components/Select/Select'

export default {
  name: 'PartSelectItems',
  components: {
    rSelect,
    BaseTable
  },
  mixins: [formMixins],
  props: {
    fromtype: String
  },
  data() {
    return {
      partId: '',
      search: {
        limit: 10,
        pageNum: 1
      },
      dialogVisible: false
    }
  },
  // userInfo用户信息systemParam系统参数
  computed: {
    ...mapGetters(['userInfo', 'systemParam'])
  },
  mounted() {},
  methods: {
    // 查询代理商选择列表
    openShop() {
      this.dialogVisible = true
      this.searchHandle()
    },
    searchHandle() {
      const table = this.$refs['table']
      table.wait()
      queryPartInfoByLabour(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },

    // 确定
    req() {

    },
    cancel() {
      this.dialogVisible = false
    }
  }
}

</script>

<style scoped>

</style>
